﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Manage/Views/Shared/Master.cshtml";
}
@model demo.Entity.WebSiteInfo
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>网站信息</title>
    <link href="~/Content/Manage/pintuer.css" rel="stylesheet" />
    <link href="~/Content/Manage/admin.css" rel="stylesheet" />
    <link href="~/Pluging/webuploader/webuploader.css" rel="stylesheet" />
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="~/Pluging/artdialog/ui-dialog.css" rel="stylesheet" />

    <script src="~/Scripts/Manage/jquery.js"></script>
    <script src="~/Scripts/Manage/pintuer.js"></script>
    <script src="~/Pluging/webuploader/webuploader.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Pluging/artdialog/dialog-min.js"></script>
    <script src="~/Scripts/Manage/common.js"></script>
    <style>
        .file-panel {
            z-index: 1;
            position: absolute;
            left: 81px;
        }

        .error {
            color: red;
        }
    </style>
</head>
<body>
    <div class="panel admin-panel">
        <div class="panel-head"><strong><span class="icon-pencil-square-o"></span> 网站信息</strong></div>
        <div class="body-content">
            <form method="post" class="form-x" action="" id="form">
                @Html.HiddenFor(m => m.Id)
                <div class="form-group">
                    <div class="label">
                        <label>网站标题：</label>
                    </div>
                    <div class="field">
                        @*<input type="text" class="input" name="stitle" value="" />*@
                        @Html.TextBoxFor(m => m.Title, new { @class = "input" })
                        <div class="tips"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="label">
                        <label>网站LOGO：</label>
                    </div>
                    <div class="field">
                        @*<input type="text" id="url1" name="slogo" class="input tips" style="width:25%; float:left;" value="" data-toggle="hover" data-place="right" data-image="" />
                            <input type="button" class="button bg-blue margin-left" id="image1" value="+ 浏览上传">*@
                        <div id="uploader-demo">
                            @*<img src="" id="logoImg" />*@
                            <div id="showImg" class="file-item thumbnail draggable-element "  style="position:relative;">
                                <img src="" id="logoImg" width="100px" height="100px"/>
                                @*<a class="file-panel" href="javascript:;">
                                    <span class="close"></span>                                    
                                </a><input type="hidden" id="data_photo" name="photo[]" value="' + value + '">*@
                            </div>
                            <!--用来存放item-->
                            <div id="fileList" class="uploader-list"></div>
                            <div id="filePicker">选择图片</div>
                            @Html.HiddenFor(m => m.Logo)
                        </div>
                    </div>

                </div>
                <div class="form-group">
                    <div class="label">
                        <label>网站域名：</label>
                    </div>
                    <div class="field">
                        @Html.TextBoxFor(m => m.DomainName, new { @class = "input" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="label">
                        <label>网站关键字：</label>
                    </div>
                    <div class="field">
                        @Html.TextAreaFor(m => m.Keywords, new { @class = "input", style = "height:80px" })
                        <div class="tips"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="label">
                        <label>网站描述：</label>
                    </div>
                    <div class="field">
                        @Html.TextAreaFor(m => m.Description, new { @class = "input", style = "height:80px" })
                        <div class="tips"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="label">
                        <label>联系人：</label>
                    </div>
                    <div class="field">
                        @Html.TextBoxFor(m => m.Contact, new { @class = "input" })
                        <div class="tips"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="label">
                        <label>手机：</label>
                    </div>
                    <div class="field">
                        @Html.TextBoxFor(m => m.MobilePhone, new { @class = "input" })
                        <div class="tips"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="label">
                        <label>电话：</label>
                    </div>
                    <div class="field">
                        @Html.TextBoxFor(m => m.Phone, new { @class = "input" })
                        <div class="tips"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="label">
                        <label>QQ：</label>
                    </div>
                    <div class="field">
                        @Html.TextBoxFor(m => m.QQ, new { @class = "input" })
                        <div class="tips"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="label">
                        <label>Email：</label>
                    </div>
                    <div class="field">
                        @Html.TextBoxFor(m => m.Email, new { @class = "input" })
                        <div class="tips"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="label">
                        <label>地址：</label>
                    </div>
                    <div class="field">
                        @Html.TextBoxFor(m => m.Address, new { @class = "input" })
                        <div class="tips"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="label">
                        <label></label>
                    </div>
                    <div class="field">
                        <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    // 初始化Web Uploader
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,

        // swf文件路径
        swf: '/Pluging/webuploader/Uploader.swf',

        // 文件接收服务端。
        server: '/WebUploader/UploadImg',

        // 重复上传图片，true为可重复false为不可重复
        duplicate: true,

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: { id: $('#filePicker'), multiple: false },//multiple: false

        //fileNumLimit: 1,//只能上传一张

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }

    });

    // 当有文件添加进来的时候
    uploader.on('fileQueued', function (file) {
        //var $list = $("#fileList"),
        //$li = $(
        //        '<div id="' + file.id + '" class="file-item thumbnail">' +
        //            '<img>' +
        //            '<div class="info">' + file.name + '</div>' +
        //        '</div>'
        //        ),

        //    $img = $li.find('img');


        //// $list为容器jQuery实例
        //$list.append($li);

        //// 创建缩略图
        //// 如果为非图片文件，可以不用调用此方法。
        //// thumbnailWidth x thumbnailHeight 为 100 x 100
        //uploader.makeThumb(file, function (error, src) {
        //    if (error) {
        //        $img.replaceWith('<span>不能预览</span>');
        //        return;
        //    }

        //    $img.attr('src', src);
        //}, 100, 100);
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {
        var $li = $('#' + file.id),
            $percent = $li.find('.progress span');

        // 避免重复创建
        if (!$percent.length) {
            $percent = $('<p class="progress"><span></span></p>')
                .appendTo($li)
                .find('span');
        }

        $percent.css('width', percentage * 100 + '%');
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on('uploadSuccess', function (file, response) {
        $("#showImg").hide();
        var value = response.Value.split('|')[1];
        $("#Logo").val(response.Value);
        $('#' + file.id).addClass('upload-state-done');
        var $list = $("#fileList"),
            $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail draggable-element d-"' + file.id.substr(file.id.length - 1, 1) + ' style="position:relative;">' +
                    '<img>' +
                    '<a class="file-panel" href="javascript:;" onclick="remove(\'' + value + '\', \'' + file.id + '\')">' +
                    '<span class="close"></span>' +
                    '</a>' +
                    //'<input type="hidden" id="data_photo" name="photo[]" value="' + value + '">' +
                    '</div>'
            ),
            $img = $li.find('img');
        // $list为容器jQuery实例
        $list.html($li);

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb(file, function (error, src) {
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr('src', src);
        }, 100, 100);
    });

    // 文件上传失败，显示上传出错。
    uploader.on('uploadError', function (file) {
        var $li = $('#' + file.id),
            $error = $li.find('div.error');

        // 避免重复创建
        if (!$error.length) {
            $error = $('<div class="error"></div>').appendTo($li);
        }

        $error.text('上传失败');
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on('uploadComplete', function (file) {
        $('#' + file.id).find('.progress').remove();
    });

    function remove(file, obj) {
        $('#' + obj).remove();
        //var html = '<input type="hidden" id="data_photo" name="remove[]" value="' + file + '">';
        //$('#fileList').append(html);
        $("#Logo").val("");
    }
</script>
<script src="~/Areas/Manage/Scripts/HomeIndex.js"></script>
<script>
    $("#showImg").hide();
    var orisrc = '@Model.Logo';
    var src = orisrc.split('|')[1];
    if (src != null) {
        $("#showImg").show();
        $("#logoImg").attr("src", src);
    }
    
    
</script>